<template>
	<view> <!-- 商品排列模板 两个框为一行 -->
		<view class="moduleContent">
			<view class="mCon-box" v-for="(item,index) in product" :key="index" @click="eventClick(item)">
				<image class="mCon-image" src="" mode=""></image>
				<view v-if="bool==true" class="productPropP">
					<text class="prop1">{{item.name}}</text>
					<view class="prop2">
						<text class="price">￥{{item.price}}</text>
					</view>
				</view>
				<view v-else class="productPropP">
					<text class="prop1">{{item.name}}</text>
					<text class="integral">积分:4185</text>
					<text class="price2">￥{{item.price}}</text>
				</view>
				<!-- 积分兑换 -->
				<shopping-cart v-if="cartId!=4" class="shoppingCart cart-btn posit"  
				:Item="item" 
				:cartId="cartId" 
				color="#e15852"
				></shopping-cart>
				<!-- 商品购买 -->
				<shopping-cart v-else class="shoppingCart cart-btn2"  
				:Item="item" 
				:cartId="cartId" 
				color="#e15852" 
				:cartBool="true"
				></shopping-cart>
			</view>
		</view>
	</view>
</template>

<script>
	import shoppingCart from '@/components/shoppingCart-Button.vue';
	export default {
		components:{
			shoppingCart,
		},
		name: 'product1',
		props:{
			//商品列表
			product: {
				type: Array,
				default: ()=>[]
			},
			//
			
		},
		data() {
			return {
				productList: this.product,
			};
		},
		watch:{},
		methods:{
			eventClick(item){
				console.log(item)
			}
		},
	}
</script>

<style lang="scss">
	.shoppingCart{
		width: auto;
		height: auto;
		bottom: 20upx;
		right: 60upx;
	}
	.cart-btn{
		right: 15upx;
	}
	.cart-btn2{
		bottom: 30upx;
	}
	.posit{
		position: absolute;
	}
	
	.moduleContent{
		padding: 30upx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		.mCon-box{
			height: auto;
			width: 330upx;
			display: table-cell;
			vertical-align: middle;
			text-align: center;
			margin-bottom: 16upx;
			margin-top: 0;
			box-shadow: 0 0 28upx 0 rgba(0,0,0,.08);
			border: 2upx solid #eee;
			overflow: hidden;
			background: #fff;
			border-radius: 12upx;
			position: relative;
			.mCon-image{
				width: 330upx;
				height: 330upx;
				max-width: 100%;
				max-height: 100%;
				border-top-right-radius: 12upx;
				border-top-left-radius: 12upx;
				border-bottom-left-radius: 0;
				border-bottom-right-radius: 0;
				display: table-cell;
				vertical-align: middle;
				text-align: center;
			}
			
			.productPropP{
				margin: 16upx 0 18upx 0;
				font-size: 17px;
				overflow: hidden;
				position: relative;
				padding: 0 18upx;
				color: #3285ff;
			}
			.prop1{
				font-size: 14px;
				width: 290upx;;
				max-height: 76upx;
				word-break: break-all;
				text-overflow: ellipsis;
				overflow: hidden;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				// -webkit-box-orient: vertical;
				-webkit-box-sizing: content-box;
				box-sizing: content-box;
			}
			.prop2{
				display: flex;
				align-items: center;
				min-height: 66upx;
				width: 100%;
				margin-top: 12upx;
				justify-content: space-between;
			}
			.price{
				font-size: 15px;
				max-width: 264upx;
				overflow: hidden;
				text-overflow: ellipsis;
				padding-right: 10upx;
			}
			.integral{
				width: 100%;
				display: inline-block;
				line-height: 30upx;
				margin: 20upx 0;
				text-align: left;
				font-size: 15px;
			}
			.price2{
				width: 100%;
				color: #999;
				text-decoration: line-through;
				font-size: 12px;
				line-height: 30upx;
				display: inline-block;
				text-align: left;
			}
		}
	}
</style>
